<!DOCTYPE html>
<html>
<head>
    <title>实时监测</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <el-container>
        <el-aside width="300px" style="padding: 20px 0 0 20px;">
            <el-card style="height: 80vh;overflow: auto;">
                <el-tree
                        :data="addressData"
                        :default-expanded-keys="[1]"
                        highlight-current="true"
                        accordion
                        @node-click="handleNodeClick">
                </el-tree>
            </el-card>
        </el-aside>
        <el-main>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>{{ cri_name }}</span>
                    </div>
                </template>
                <el-row :gutter="12">
                    <el-col :span="8" v-for="i in 6">
                        <el-card shadow="never">
                            <div style="height: 300px"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </el-main>
    </el-container>
</div>
<script type="text/javascript">
    const App = {
        data() {
            return {
                loading: true,
                addressData:[],
                cri_name:'',
            };
        },
        created: function () {
            this.getAddressList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Monitor://admin_index/getAddressDeviceList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.addressData = res.data
                        }
                    }
                });
            },
            //选中地区树
            handleNodeClick(data) {
                this.cri_name = data.cri_name+'监控界面'
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>